<template>
	<view
		v-if="showPopup"
		:class="(direction === 'center' ? 'flex justify-center align-center ' : '') + (isMask ? 'mask-show' : 'mask-hide')"
		:style="{
			position: 'fixed',
			left: 0,
			right: 0,
			top: posTop + 'px',
			bottom: 0,
			zIndex,
			background: `rgba(0, 0, 0, ${ opacity })`
		}"
		@click="handleCloseMask()"
	>
		<view
			:class="direction === 'top' ? 'slider' : ''"
			:style="{
				width: popupWidth,
				height: popupHeight ? popupHeight : 'auto',
				backgroundColor: popupBg,
				borderRadius: popupRadius,
			}"
		>
			<view v-if="isTitle" class="mar-b-20 mar-x-10 pad-t-10">
				<h4>{{ title }}</h4>
			</view>
			
			<!-- 内容插槽 -->
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
	// 自定义弹窗组件
	export default {
		props: {
			// 控制组件显示隐藏（需要监听值）
			show: {
				type: Boolean,
				default: false
			},
			
			// 弹窗打开方向
			direction: {
				type: String,
				default: 'center'
			},
			
			// 点击遮罩是否关闭弹窗
			// 如果开启点击遮罩关闭弹窗，在调用组件的页面一定要绑定 @handleCloseMask 此方法，它的值是你控制组件关闭的方法
			closeOnClickOverlay: {
				type: Boolean,
				default: false
			},
			
			// 定位距离顶部的位置
			posTop: {
				type: Number,
				default: 44
			},
			
			// 弹窗内容区域宽度
			popupWidth: {
				type: String,
				default: '90%'
			},
			
			// 弹窗内容区域高度
			popupHeight: {
				type: String,
				default: ''
			},
			
			// 弹窗内容区域圆角
			popupRadius: {
				type: String,
				default: '5px'
			},
			
			// 弹窗内容区域内边距
			popupPadding: {
				type: String,
				default: '10px'
			},
			
			// 弹窗内容区域背景
			popupBg: {
				type: String,
				default: '#ffffff'
			},
			
			// 是否显示标题
			isTitle: {
				type: Boolean,
				default: true
			},
			
			// 弹窗标题
			title: {
				type: String,
				default: '标题'
			},
			
			// 遮罩透明度
			opacity: {
				type: Number,
				default: 0.3
			},
			
			// 定位层级
			zIndex: {
				type: Number,
				default: 999
			}
		},
		
		watch: {
			// 监听弹窗显示
			show(newVal) {
				if (newVal === true) {
					document.body.style.overflow = 'hidden' // 禁止页面滚动
					this.isMask = true
					this.showPopup = true
				} else {
					document.body.style.overflow = 'visible' // 还原页面混动
					this.handleClose()
				}
			}
		},
		
		data() {
			return {
				// 控制弹窗遮罩动画
				isMask: false,
				
				// 控制弹窗显示关闭
				showPopup: false,
			}
		},
		
		methods: {
			// 点击遮罩关闭弹窗
			handleCloseMask() {
				if (!this.closeOnClickOverlay) return
				this.$emit('handleCloseMask')
				this.handleClose()
			},
			
			// 关闭弹窗
			handleClose() {
				this.isMask = false
				
				// 关闭时，做个延迟，否则遮罩关闭没有过渡效果
				setTimeout(() => {
					this.showPopup = false
				}, 200)
			}
		}
	}
</script>

<style lang="scss">
	.mask-show {
		animation: showMask 0.3s ease-in-out;
	}
	
	.mask-hide {
		animation: hideMask 0.3s ease-in-out;
	}
	
	// 下拉动画
	.slider {
		animation: sliderAni 0.3s ease-in-out;
	}
	
	// 显示遮罩动画
	@keyframes showMask {
		0% {
			opacity: 0;
		}
		
		100% {
			opacity: 1;
		}
	}
	
	// 隐藏遮罩动画
	@keyframes hideMask {
		0% {
			opacity: 1;
		}
		
		100% {
			opacity: 0;
		}
	}
	
	// 内容高度动画
	@keyframes sliderAni {
		0% {
			height: 0px;
			opacity: 0;
		}
		50% {
			opacity: 0;
		}
		100% {
			height: 210px;
			opacity: 1;
		}
	}
</style>